<template>
	<div class="select-course">
    <ul class="list-course" v-if="courseList.length > 0">
      <li v-for="(item, index) in courseList" :key="index" :class="{'active': activeIndex==index}" @click="changeIndex(index)">
        <div class="cover"><img :src="item.frontImageFileUrl ? item.frontImageFileUrl : 'https://newmefit.cn/resource/gym/base/base2.jpg'" mode="aspectFit"></div>
        <div class="course-info">
          <h4>{{ item.courseName }}</h4>
          <p>合约编号：{{ item.id}}</p>
          <p>课程状态：<span class="status1">{{getStatus(item.signCourseState)}}</span></p>
          <p>剩余数量：{{ item.remainCount ? item.remainCount : '' }}</p>
          <p>有效期至：{{ item.expirationEndTime ? item.expirationEndTime : '' }}</p>
          <span class="sale-mode">{{setSaleMode(item.saleMode)}}</span>
        </div>
      </li>
    </ul>
    <div class="no-data" v-if="courseList.length === 0">
      <img src="https://newmefit.cn/resource/gym/base/base6.png">
    </div>
    <div class="footer">
      <span class="next" @click="submit">确认</span>
    </div>
	</div>
</template>

<script>
  import { signPage,listSignCourseByTeachCoachUserIdAndMemberUserId } from '@/api/manageApi'
  import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
        page: 1,
        limit: 10,
        more: 'more',
        rateValue: 5,
        courseList: [],
        storeName: '',
        activeIndex: -1
			}
    },
    computed:{
			...mapGetters(['uniToken', 'userInfo'])
		},
		onLoad (option) {
      if(option.memberId){
        this.listSignCourseByTeachCoachUserIdAndMemberUserId(option.coachId, option.memberId)
      }else{
        this.listSignCourseByTeachCoachUserIdAndMemberUserId(option.coachId, this.userInfo.userId)
      }
      
    },
		methods: {
      setSaleMode (val) {
        if (val === 0) {
          return '按次'
        } else if (val === 1) {
          return '包时'
        } else {
          return ''
        }
      },
      changeIndex (index) {
        this.activeIndex = index
      },
      getStatus (val) {
        if (val === 1) {
          return '未开始'
        } else if (val === 2){
          return '正常'
        } else {
          return ''
        }
      },
      listSignCourseByTeachCoachUserIdAndMemberUserId (coachId, memberUserId) {
        var params = {
          memberUserId: memberUserId,
          coachUserId: coachId
        }
        listSignCourseByTeachCoachUserIdAndMemberUserId(params).then(res => {
          console.log(res)
          if (res.code == '200') {
            var data = res.data
            this.courseList = data
          }
        })
      },
      submit () {
        if (this.activeIndex === -1) {
          this.uShowToast('请选择课程')
        } else {
          this.getOpenerEventChannel().emit('sonPageData', this.courseList[this.activeIndex])
          this.goBackUrl()
        }
      }
		}
	}
</script>

<style lang="scss">
.select-course{
  .list-course{
    width: 702rpx;
		margin: 24rpx;
		li{
			width: 702rpx;
      // height: 188rpx; 
      background: #FFFFFF;
      border-radius: 20rpx;
      border: 2px solid #fff;
			display: flex;
      margin-bottom: 24rpx;
      padding: 28rpx;
      box-sizing: border-box;
      position: relative;
			.cover{
				width: 186rpx;
        height: 204rpx;
        line-height: 128rpx;
        border-radius: 15rpx;
        margin-right: 10rpx;
        background: #f5f5f5;
				img{
					max-width: 100%;
					max-height: 100%;
          vertical-align: middle;
				}
			}
			.course-info{
        position: relative;
        .sale-mode{
          position: absolute;
          right: -20rpx;
          top: -10rpx;
          font-size: 24rpx;
          color: red;
        }
				h4{
					font-size: 29rpx;
					color: #1E1E1E;
					margin-bottom: 14rpx;
					margin-top: -6rpx;
					width: 411rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				p{
					font-size: 25rpx;
					color: #838383;
					margin-bottom: 10rpx;
					.status1{
            width: 64rpx;
            height: 32rpx;
            line-height: 32rpx;
            font-weight: 500;
            font-size: 20rpx;
            color: #FF5A20;
            border-radius: 5rpx;
            border: 1px solid #FF5A20;
            text-align: center;
            display: inline-block;
					}
          .status2{
            width: 84rpx;
            height: 32rpx;
            line-height: 32rpx;
            text-align: center;
            font-weight: 500;
            font-size: 20rpx;
            color: #F6A51F;
            border-radius: 5rpx;
            border: 1px solid #F6A51F;
            display: inline-block;
          }
				}
			}
		}
    li.active{
      border: 2px solid #FF5D3D;
    }
    li.active::after{
      content: '';
      width: 52rpx;
      height: 52rpx;
      background: #FF5D3D;
      border-radius: 0rpx 20rpx 0rpx 50rpx;
      background: url('../../static/s3.png') no-repeat 0 0;
      background-size: cover;
      position: absolute;
      right: -2rpx;
      top: -2rpx;
    }
	}
  .footer{
    width: 750rpx;
    height: 128rpx;
    background: #FFFFFF;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    span{
      margin-top: 24rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      display: inline-block;
      border-radius: 40rpx;
      background: #FF5D3D;
      font-size: 32rpx;
      color: #FFFFFF;
    }
    .next{
      width: 646rpx;
    }
    .pre-step{
      width: 328rpx;
      background: #FFFFFF;
      border: 1px solid #FF5A20;
      color: #FF5A20;
      margin-right: 30rpx;
    }
    .next-step{
      width: 328rpx;
    }
  }
}
</style>
